<!--
 * @Author: sunli
 * @Date: 2024-02-20 09:47:59
 * @LastEditors: sunli
 * @LastEditTime: 2024-02-23 09:04:47
 * @FilePath: /debug/src/views/operation/project-detail.vue
 * @Description: 
-->
<template>
	<div class="project-detail">
    <div class="nav">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/operation/project' }">应用管理</el-breadcrumb-item>
        <el-breadcrumb-item>应用详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
		<div class="main">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="base">
          <!-- 基本信息 -->
          <div class="baseinfo">
            <el-descriptions title="">
              <el-descriptions-item label="应用名">{{projectInfo.name}}</el-descriptions-item>
              <el-descriptions-item label="语言">{{projectInfo.language}}</el-descriptions-item>
              <el-descriptions-item label="框架">{{projectInfo.type}}</el-descriptions-item>
              <el-descriptions-item label="KEY">{{projectInfo.KEY}}</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-tab-pane>
        <el-tab-pane label="报警方式" name="report">
          <!-- 报警方式 -->
          <div class="report">
            <div>
              <p>手机短信通知</p>
              <span class="label">{{projectInfo.projectMobile}}</span>
              <el-switch
                v-model="projectInfo.reportMobile"
                size="large"
                @change="modifyReportMobile"
              />
            </div>
            <br>
            <div>
              <p>电子邮箱通知</p>
              <span class="label">{{projectInfo.projectEmail}}</span>
              <el-switch
                v-model="projectInfo.reportEmail"
                size="large"
                @change="modifyReportEmail"
              />
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="其他操作" name="other">
          <!-- 报警方式 -->
          <div class="report">
            <div>
              <p>手机号码</p>
              <span class="label">{{ projectInfo.projectMobile}}</span>
              <el-link type="primary" :underline="false" @click="modifyConcat('projectMobile')">修改</el-link>
            </div>
            <br>
            <div>
              <p>电子邮箱</p>
              <span class="label">{{ projectInfo.projectEmail }}</span>
              <el-link type="primary" :underline="false" @click="modifyConcat('projectEmail')">修改</el-link>
            </div>
            <br>
            <div>
              <p>删除应用</p>
              <span class="label">test</span>
              <el-link type="primary" :underline="false" @click="remove">删除</el-link>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
	</div>
</template>
  
<script setup>
import { onMounted, reactive, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'
import httpReq from '@/request'
import useStore from '@/store/index'

const store = useStore()
const router = useRouter()
const route = useRoute()
const userVO = store.userVO

const activeName = ref('base')

const form = reactive({
  openMobile: false,
  openEmail: false,
})


const projectInfo = ref({})
onMounted(async() => {
  queryDetail()
})

const queryDetail = async () => {
  projectInfo.value = await httpReq.post('http://localhost:8092/project/queryByKEY', {KEY: route.query.KEY})
}

const handleClick = () => {
}
// 更新信息
const modifyConcat = (type) => {
  const params = JSON.parse(JSON.stringify(projectInfo.value))
  ElMessageBox.prompt(`请输入你的${type === 'projectMobile' ? '手机号码' : '电子邮箱'}`, '修改')
    .then(async ({value}) => {
      params[type] = value
      await httpReq.post('http://localhost:8092/project/update', params)
      ElMessage({
        type: 'success',
        message: `更新成功`,
      })
      queryDetail()
    })
    .catch(() => {})
}
// 更新报警方式
const modifyReportMobile = async(value) => {
  const params = JSON.parse(JSON.stringify(projectInfo.value))
  params.reportMobile = value
  await httpReq.post('http://localhost:8092/project/update', params)
  ElMessage({
    type: 'success',
    message: '更新成功',
  })
  queryDetail()
}
const modifyReportEmail = async(value) => {
  const params = JSON.parse(JSON.stringify(projectInfo.value))
  params.reportEmail = value
  await httpReq.post('http://localhost:8092/project/update', params)
  ElMessage({
    type: 'success',
    message: '更新成功',
  })
  queryDetail()
}
// 删除
const remove = async() => {
  ElMessageBox.confirm(
    '是否确认删除该应用',{
      confirmButtonText: '删除',
      cancelButtonText: '关闭',
      type: 'warning',
    }
  )
    .then(async () => {
      await httpReq.post('http://localhost:8092/project/detele', {KEY: route.query.KEY})
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      router.back()
    })
    .catch(() => {})
}
</script>

<style lang="scss" scoped>
.label {
  display: inline-block;
  width: 300px;
}
.el-switch {
  margin-left: 20px;
}
.nav {
  padding: 20px 10px;
}
.main {
  margin: 0 auto;
  max-width: 900px;
  .report {
    p {
      font-size: 14px;
      font-weight: 500;
    }
    .label {
      font-size: 14px;
      color: #606266;
    }
  }
}
</style>
  